<template>
  <div class="pt-divider" :style="{
    backgroundImage: `linear-gradient(to right, ${lineColor} ${start}, transparent ${start} ${end}, ${lineColor} ${end})`,
    backgroundSize: `100% ${lineWidth}px`,
    textAlign: position
  }">
    <span ref="dividerText" class="divider-text" :style="{ color: textColor }">
      <slot />
    </span>
  </div>
</template>
<script>
export default {
  props: {
    textColor: {
      type: String,
      default: '#666'
    },
    textBgColor: {
      type: String,
      default: '#fff'
    },
    lineColor: {
      type: String,
      default: '#ddd'
    },
    lineWidth: {
      type: Number,
      default: 1
    },
    position: {
      type: String,
      default: 'center',
      validator(value) {
        return ['left', 'center', 'right'].includes(value)
      }
    }
  },
  data() {
    return {
      start: 0,
      end: 0
    }
  },
  mounted() {
    this.setPosition()
  },
  updated() {
    this.setPosition()
  },
  methods: {
    setPosition() {
      let w = this.$refs.dividerText.offsetWidth
      let x = '30px'
      if(this.position === 'left') {
        this.start = x
        this.end = `calc(${x} + ${w}px)`
      } else if (this.position === 'center') {
        w = w / 2
        this.start = `calc(50% - ${w}px)`
        this.end = `calc(50% + ${w}px)`
      } else if (this.position === 'right') {
        this.start = `calc(100% - ${w + 30}px)`
        this.end = `calc(100% - 30px)`
      }
    }
  }
}
</script>
<style>
.pt-divider {
  position: relative;
  padding: 30px;
  width: 100%;
  background-position-y: 50%;
  background-repeat: no-repeat;
}
.divider-text {
  padding: 0 15px;
}
</style>
